<template>
  <div id="qualityProportion" class="quality-proportion"></div>
</template>

<script>
import * as echarts from "echarts";

export default {
  props: ["r1", "r2", "r3", "r4", "r5", "r6"],
  // 质量图表
  methods: {
    // 水质占比

    quality() {
      if (
        this.myChart != null &&
        this.myChart != "" &&
        this.myChart != undefined
      ) {
        this.myChart.dispose(); //解决echarts dom已经加载的报错
      }
      this.myChart = echarts.init(document.getElementById("qualityProportion"));

      let option = {
        tooltip: {
          transitionDuration: 0,
          show: true,
          trigger: "item",
          formatter: "{b} {c}(个) {d}%",
        },

        color: [
          "#c0e9ed",
          "#61b3e2",
          "#73e64d",
          "#e5e958",
          "#d78b39",
          "#d33228",
        ],
        legend: {
          itemWidth: 10,
          itemHeight: 10,
          // top:146,
          textStyle: {
            //图例文字的样式
            fontSize: 6,
          },
          // right: 70,

          // bottom: -5,

          // width: 20,
          // height: 30,
          orient: "horizontal",
          data: [
            {
              name: "Ⅰ类",

              textStyle: {
                color: "#c0e9ed", // 图例文字颜色
              },
            },
            {
              name: "Ⅱ类",

              textStyle: {
                color: "#61b3e2", // 图例文字颜色
              },
            },
            {
              name: "Ⅲ类",

              textStyle: {
                color: "#73e64d", // 图例文字颜色
              },
            },
            {
              name: "Ⅳ类",

              textStyle: {
                color: "#e5e958", // 图例文字颜色
              },
            },
            {
              name: "Ⅴ类",

              textStyle: {
                color: "#d78b39", // 图例文字颜色
              },
            },
            {
              name: "劣Ⅴ类",

              textStyle: {
                color: "#d33228", // 图例文字颜色
              },
            },
          ],
          
        },

        series: [
          {
            type: "pie",
            radius: ["30%", "85%"],
            center: ["50%", "57%"],
            avoidLabelOverlap: false,
            itemStyle: {
              normal: {
                // label: {
                //   show: true,
                //   position: 'right',
                //   color:'white'
                // },
              },
            },
            label: {
              //饼图图形上的文本标签
              normal: {
                show: true,
                position: "inner", //标签的位置
                textStyle: {
                  fontWeight: 300,
                  color: "#fff",
                  fontSize: 9, //文字的字体大小
                },
                formatter: "{d}%",
              },
            },

            labelLine: {
              show: false,
            },
            data: [
              { value: this.r1, name: "Ⅰ类" },
              { value: this.r2, name: "Ⅱ类" },
              { value: this.r3, name: "Ⅲ类" },
              { value: this.r4, name: "Ⅳ类" },
              { value: this.r5, name: "Ⅴ类" },
              { value: this.r6, name: "劣Ⅴ类" },
            ],
          },
        ],
      };

      this.myChart.setOption(option);
    },

    // 窗口大小改变
    handleResize() {
      this.myChart.resize(); // 只要窗口大小改变 echarts跟着容器变化
    },
  },
  mounted() {
    // 监听窗口大小改变
    window.addEventListener("resize", this.handleResize);

    this.quality();
  },
  watch: {
    r1: {
      deep: true, // 开启深度监听
      handler(newValue, oldValue) {
        // 观察到数据变化 重新渲染
        this.myChart.clear(); // 清除画布
        this.quality(); // 重新绘制
      },
    },
    r2: {
      deep: true, // 开启深度监听
      handler(newValue, oldValue) {
        // 观察到数据变化 重新渲染
        this.myChart.clear(); // 清除画布
        this.quality(); // 重新绘制
      },
    },
    r3: {
      deep: true, // 开启深度监听
      handler(newValue, oldValue) {
        // 观察到数据变化 重新渲染
        this.myChart.clear(); // 清除画布
        this.quality(); // 重新绘制
      },
    },
    r4: {
      deep: true, // 开启深度监听
      handler(newValue, oldValue) {
        // 观察到数据变化 重新渲染
        this.myChart.clear(); // 清除画布
        this.quality(); // 重新绘制
      },
    },
    r5: {
      deep: true, // 开启深度监听
      handler(newValue, oldValue) {
        // 观察到数据变化 重新渲染
        this.myChart.clear(); // 清除画布
        this.quality(); // 重新绘制
      },
    },
    r6: {
      deep: true, // 开启深度监听
      handler(newValue, oldValue) {
        // 观察到数据变化 重新渲染
        this.myChart.clear(); // 清除画布
        this.quality(); // 重新绘制
      },
    },
  },
  // 销毁前
  beforeDestroy() {
    // 解绑事件 [性能优化]
    window.removeEventListener("resize", this.handleResize);
  },
};
</script>

<style lang="less" scoped>
.quality-proportion {
  height: 2.5rem;
}
</style>